<template>
	<view>
		<!-- pages/cart/cart.wxml -->
		<!-- 收货地址 -->
		<!-- 购物车内容 -->
		<view class="cart_content">
			<view class="cart_title">管理</view>
			<view class="cart_main">
				<!-- 当cart数组 长度不为0 显示商品信息 -->
				<block v-if="cart.length!==0">
					<view v-for="(item, index) in cart" :key="index" class="cart_item">
						<!-- 复选框 -->
						<view class="cart_chk_wrap">
							<checkbox-group :data-id="item.goods_id" @change="handleItemChange">
								<checkbox :checked="item.checked"></checkbox>
							</checkbox-group>
						</view>
						<!-- 商品图片 -->
						<navigator class="cart_img_wrap"
							:url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id">
							<image :src="item.goods_small_logo" mode="widthFix"></image>
						</navigator>
						<!-- 商品信息 -->
						<view class="cart_info_wrap">
							<navigator class="goods_name"
								:url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id">
								{{item.goods_name}}
							</navigator>
							<view class="goods_price_wrap">
								<view class="goods_price">￥{{item.goods_price}}</view>
								<view class="cart_num_tool">
									<view @tap="handleItemNumEdit" :data-id="item.goods_id" :data-operation="-1"
										class="num_edit">
										-
									</view>
									<view class="goods_num">{{item.num}}</view>
									<view @tap="handleItemNumEdit" :data-id="item.goods_id" :data-operation="1"
										class="num_edit">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<image src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658"
						mode="widthFix" style="width: 600rpx;margin-left: 80rpx;margin-top: 150rpx;"></image>
				</block>
			</view>
		</view>
		<!-- 底部工具栏 -->
		<view class="footer_tool">
			<!-- 全选 -->
			<view class="all_chk_wrap">
				<checkbox-group @change="handleItemAllCheck">
					<checkbox :checked="allChecked">全选</checkbox>
				</checkbox-group>
			</view>
			<!-- 总价格 -->
			<view class="total_price_wrap">
				<view class="total_price">
					合计：
					<text class="total_price_text">￥{{totalPrice}}</text>
				</view>
				<view>包含运费</view>
			</view>
			<!-- 结算 -->
			<view class="order_pay_wrap" @tap="handlePay">结算（{{totalNum}}）</view>
		</view>
	</view>
</template>

<script>
	// pages/cart/cart.js

	import regeneratorRuntime from "../../lib/runtime/runtime";

	export default {
		data() {
			return {
				cart: [],
				allChecked: false,
				totalPrice: 0,
				totalNum: 0
			};
		},

		components: {},
		props: {},
		onLoad: function(res) {
			uni.$on('sendTitle', (data) => {
				this.sendAdd = data.cname + data.cphone + data.caddress + data.cadd;
			})
		},
		onUnload: function(res) {
			uni.$off('sendTitle');
		},
		onShow() {
			const cart = wx.getStorageSync("cart") || [];
			this.setCart(cart);
		},
		methods: {
			handleChoose() {
				uni.navigateTo({
					url: '../add/add'
				})
			},
			// 商品的选中
			handleItemChange(e) {
				// 1. 获取被修改的商品的id
				const goods_id = e.currentTarget.dataset.id; // console.log(goods_id);
				// 2. 获取购物车数组

				let {
					cart
				} = this;
				// 3. 找到被修改的商品的对象

				let index = cart.findIndex(v => v.goods_id === goods_id);
				// 4. 选中状态取反

				cart[index].checked = !cart[index].checked;
				this.setCart(cart);
			},

			// 设置购物车状态的同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
			setCart(cart) {
				let allChecked = true; // 总价格 总数量

				let totalPrice = 0;
				let totalNum = 0;
				cart.forEach(v => {
					if (v.checked) {
						totalPrice += v.num * v.goods_price;
						totalNum += v.num;
					} else {
						allChecked = false;
					}
				}); // 判断数组是否为空

				allChecked = cart.length != 0 ? allChecked : false;
				this.setData({
					cart,
					totalPrice,
					totalNum,
					allChecked
				});
				wx.setStorageSync("cart", cart);
			},

			// 商品全选功能
			handleItemAllCheck() {
				// 1. 获取data中的数据
				let {
					cart,
					allChecked
				} = this; // 2. 修改值

				allChecked = !allChecked; // 3. 循环修改cart数组中的商品选中状态

				cart.forEach(v => v.checked = allChecked); // 4. 把修改后的值 填充回data或者缓存中

				this.setCart(cart);
			},

			// 商品数量的编辑功能
			async handleItemNumEdit(e) {
				// 1. 获取传递过来的参数
				const {
					operation,
					id
				} = e.currentTarget.dataset; // console.log(operation, id);
				// 2. 获取购物车数组

				let {
					cart
				} = this; // 3. 找到需要修改的商品的索引

				const index = cart.findIndex(v => v.goods_id === id); // 判断是否要执行删除

				if (cart[index].num === 1 && operation === -1) {
					// 弹窗提示
					const res = await wx.showModal({
						content: "您是否要删除？"
					});

					if (res.confirm) {
						cart.splice(index, 1);
						this.setCart(cart);
					}
				} else {
					// 4. 进行修改数量
					cart[index].num += operation; 
					// 5. 设置回缓存和data中
					this.setCart(cart);
				}
			},

			// 商品结算功能
			async handlePay() {
				// 1. 判断收货地址
				const {
					address,
					totalNum
				} = this;

				// 2. 判断用户有没有选购商品
				if (totalNum === 0) {
					await showToast({
						title: "您还没有选购商品"
					});
					return;
				}

				// 3. 跳转到支付页面
				wx.navigateTo({
					url: '/pages/pay/pay'
				});
			}

		}
	};
</script>
<style>
	@import "./cart.css";
</style>
